<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sbdm</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: hsl(35, 79%, 35%);
        }

        .zzx {
            padding-top: 40px;
            padding-left: 10px;
        }

        .wb1 {
            position: relative;
            top: -200px;
            left: 210px;
        }
        .tj{
            width: 100px;
            height: 10px;
            position: relative;
            top: -110px;
            font-size: 22px;     
            left: 10px;       
        }
        ul.slides{
            position: relative;
            left: 10px;
            top: -80px;
            width: 340px;
            height: 200px;
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        li.slide{
            margin: 0;
            padding: 0;
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            transition: .5s transform ease-in-out;
        }
        
        .slide:nth-of-type(2){
            left: 105%;
        }
        .slide:nth-of-type(3){
            left: 205%;
        }
        input[type="radio"]{
            position: relative;
            z-index: 100;
            display: none;
        }
        .controls-visible{
            position: absolute;
            width: 100%;
            bottom: 12px;
            text-align: center;
        }
        .controls-visible label{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin: 0 3px;
            border: 2px solid #fff;
        }
        .slides input[type="radio"]:nth-of-type(1):checked ~
        .controls-visible label:nth-of-type(1){
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(2):checked ~
        .controls-visible label:nth-of-type(2){
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(3):checked ~
        .controls-visible label:nth-of-type(3){
            background-color: #333;
        }
        
        .slides input[type="radio"]:nth-of-type(1):checked ~ .slide{
            transform: translateX(0%);
        }
        .slides input[type="radio"]:nth-of-type(2):checked ~ .slide{
            transform: translateX(-100.5%);
        }
        .slides input[type="radio"]:nth-of-type(3):checked ~ .slide{
            transform: translateX(-200.5%);
        }

        .an{
            font-size: 15px;
            color: #5c4f4f8c;
            border: none;
            outline: none;
            position: relative;
            left: 125px;
            top: -19px;
            cursor: pointer;
        }
        .an:hover{
            background-color: rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body>
    <div class="zzx">
        <img src="/public/static/封神.jpg" alt="" style="width: 170px; height: 200px;">
    </div>
    <div class="wb1">
        <p style="font-size: 30px; ">
            封神榜
        </p>
        <p style="font-size: 13px;">
            X-Men Origins：Wolverine
        </p>
        <p style="font-size: 12px;">
            动作 科幻 奇幻<br>
            2009.05.03 <br> 
            中国大陆上映 98分钟
        </p>

        <a href="./fsjc.html">
        <button class="an">
            >
        </button>
        </a>
       
    </div>

    <div class="tj">
        <p>
            图集
        </p>
    </div>

    <ul class="slides" style="left: 25px;">
        <input type="radio" id="control-1" name="control" checked>
        <input type="radio" id="control-2" name="control">
        <input type="radio" id="control-3" name="control">

        <li class="slide">
            <img src="/public/static/lbttp/fs1.webp" alt="">
        </li>
        <li class="slide">
            <img src="/public/static/lbttp/fs2.webp" alt="">
        </li>
        <li class="slide">
            <img src="/public/static/lbttp/fs3.webp" alt="">
        </li>

        <div class="controls-visible" style="position: relative; top: 180px;">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
        </div>
    </ul>

    <div class="wb2">
        <p style="font-size: 22px; padding-left: 10px;position: relative; top: -70px;">
            简介
        </p>
    </div>

    <div id="d1" style="padding-left: 10px;position: relative; top: -60px;">
        <div id="fullText">
            结狐妖妲己（娜然饰），暴虐无道，引发天谴。昆仑仙人姜子牙（黄渤饰）携“封神榜”下山，寻找天下共主，以救苍生。西伯侯之子姬发（于适饰）逐渐发现殷寿的本来面目，反出朝歌。各方势力暗流涌动，风云变幻端倪初显
    </div> 
    <div id="subText"></div>
    <a id="btn" onclick="change()" style="color: rgba(141, 141, 147, 0.749);"></a>
    
    </div>

    <script>
        var text;
        function show() {
            text = document.getElementById("fullText").innerHTML;
            document.getElementById("fullText").innerHTML = "";
            document.getElementById("subText").style.float = "left";
            document.getElementById("btn").style.float = "left";
            if(text.length > 100) {
                document.getElementById("subText").innerHTML = text.substring(0, 50);
                document.getElementById("btn").innerHTML = "。。展开";
            } else {
                document.getElementById("subText").innerHTML = text;
                document.getElementById("btn").innerHTML = "";
            }
        }
        function change() {
            var t = document.getElementById("btn");
            var tt = document.getElementById("subText");
            if(t.innerHTML == "。。展开") {
                tt.innerHTML = text;
                t.innerHTML = "收起"
            } else {
                tt.innerHTML = text.substring(0, 50);
                t.innerHTML = "。。展开"
            }
        }
        show();
    </script>

</body>

</html>